<template>
  <a-card hoverable class="!rounded-lg shadow-sm hover:shadow-md transition-all">
    <template #cover>
<!--      <img :src="data.cover" class="h-40 object-cover" />-->
    </template>

    <a-card-meta :title="data.name">
      <template #description>
        <div class="flex flex-col gap-2">
          <div class="flex items-center gap-2">
            <a-tag :color="data.categoryColor">{{ data.category }}</a-tag>
            <a-rate
                :value="data.rating"
                disabled
                class="!text-sm"
            />
          </div>
          <p class="text-gray-600 line-clamp-2">{{ data.description }}</p>
          <br>
          <div class="flex justify-between items-center mt-4">
            <div class="flex items-center gap-1 text-gray-500">
              <user-outlined />
              <span>{{ data.usageCount.toLocaleString() }}次调用</span>
            </div>
            <a-button type="primary" size="small">立即接入</a-button>
          </div>
        </div>
      </template>
    </a-card-meta>
  </a-card>
</template>

<script setup>
import { UserOutlined } from '@ant-design/icons-vue';

defineProps({
  data: {
    type: Object,
    required: true
  }
});
</script>